<template>
  <div>
    <ul class="home_list">
      <li @click = "currentid ='列表'"><router-link to="/home/productList" 
        :class="{'current':currentid ==='列表'}"
      >商品列表</router-link></li>
      <li @click = "currentid ='管理'"><router-link to="/home/productManage" 
        :class="{'current':currentid ==='管理'}"
      >商品管理</router-link></li>
      <li @click = "currentid ='购物车'"><router-link to="/home/shoppingCart" 
        :class="{'current':currentid ==='购物车'}"
      >购物车</router-link><span v-show="shoppingCount!==0">{{shoppingCount}}</span></li>

      <!-- <li v-for="(item,i) in homeList" :key="item.id">
        <router-link 
            :to="item.tourl" 
            @click="currentid=i" 
            :class="{'current':currentid==item.id}"
        >{{item.title}}</router-link>
      </li> -->

      <li style="width: 100px;background-color: #e6a23c">
        <a href="#" @click.prevent="initialization">初始化数据</a>
      </li>
    </ul>
    <!-- 2级路由组件的出口 -->
    <router-view></router-view>
    
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      currentid : '列表',
      // homeList:[
      //   {id:1,tourl:'/home/productList',title:'商品列表'},
      //   {id:2,tourl:'/home/productManage',title:'商品管理'},
      //   {id:3,tourl:'/home/shoppingCart',title:'购物车'},
      // ],
      shoppingCount:0,
    }
  },
  components: {
  },
  created(){
    this.getShoppingCount();
  },
  methods:{
    initialization(){
      localStorage.removeItem("productTableList");
      localStorage.removeItem("shoppingList");
      localStorage.removeItem("shoppingCount");
      location.reload();
    },
    getShoppingCount(){
      if(localStorage.getItem("shoppingCount")){
        try {
          this.shoppingCount = Number(JSON.parse(localStorage.getItem("shoppingCount")));
        } catch (error) {
          localStorage.setItem("shoppingCount",JSON.stringify(this.shoppingCount))
        }
      }else{
        localStorage.setItem("shoppingCount",JSON.stringify(this.shoppingCount))
      }
    }
  },
  watch:{
    // 直接监听路由，通过router-link换url，可以将组建对应跳转
    $route(to,from){
      if(to.path =="/home"){
        this.currentid ='列表'
      }
    },
  }
}
</script>

<style scope>
  a{
    width: 100%;
    height: 100%;
    display: block;
    text-decoration: none;
    color: #fff;
  }
  .home_list {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 80px;
    font-size: 14px;
  }
  .home_list li{
    list-style: none;
    cursor: pointer;
    width: 81px;
    height: 30px;
    margin: 20px;
    line-height: 30px;
    text-align: center;
    background: #545C64;
    float: left;
  }
  .home_list li a.current {
    color: #FFD04B;
  }
  .home_list li>span{
    display: block;
    position: relative;
    background: #F56C6C;
    width: 20px;
    height: 20px;
    border-radius: 15px;
    line-height: 20px;
    top: -36px;
    left: 69px;
    color: #fff;
    font-size: 10px;
  }
</style>